<template>
    <div style="display: flex; flex-direction: row; margin-top: 2%;">
        <div style="width: 600px; height: 500px;" ref="mainChart"></div>
    </div>
</template>

<script>
import { GetStatisticsServer } from '@/api/user';
import * as echarts from 'echarts';
export default {
    mounted() {
        this.getStatistics()
    },
    date() {
        return {
            listDateTime: [],
            listData: [],
        }
    },
    methods: {
        example() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(this.$refs.mainChart)
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '每月用户在职人数'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: this.listDateTime
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.listData,
                        type: 'line'
                    }
                ]
            })
        },
        async getStatistics() {
            let res = await GetStatisticsServer()
            if (res.code == 1) {
                this.listDateTime = res.data.listDateTime.split(',')
                this.listData = res.data.listData.split(',').map(Number)
            }
            this.example()
        }
    }
}
</script>

<style lang="less" scoped></style>